<template>
  <div class="products-page">
    <div class="page-container">
      <div class="page-header animate__animated animate__fadeInUp">
        <h1 class="page-title">
          <span class="gradient-text">Cursor套餐价格</span>
        </h1>
        <p class="page-subtitle">支持Claude Code 4.5模型，多种套餐满足不同需求</p>
      </div>
      
      <div class="products-grid">
        <div
          v-for="(product, index) in products"
          :key="product.id"
          class="product-card tiktok-card animate__animated animate__fadeInUp"
          :style="{ animationDelay: `${index * 0.1}s` }"
          @click="$router.push(`/product/${product.id}`)"
        >
          <div class="product-header">
            <div class="product-icon">{{ product.icon }}</div>
            <div class="product-info">
              <h3 class="product-name">{{ product.name }}</h3>
              <span class="product-category">{{ product.category }}</span>
            </div>
            <n-tag v-if="product.popular" type="error" size="small" class="popular-tag">
              热门
            </n-tag>
          </div>
          
          <p class="product-description">{{ product.description }}</p>
          
          <div class="product-features">
            <n-tag
              v-for="feature in product.features"
              :key="feature"
              size="small"
              class="feature-tag"
            >
              {{ feature }}
            </n-tag>
          </div>
          
          <div class="product-pricing">
            <div class="pricing-options">
              <div class="price-item">
                <span class="price-label">普通版 - 月卡</span>
                <span class="price-value">¥39.9</span>
              </div>
              <div class="price-item">
                <span class="price-label">高级版 - 月卡</span>
                <span class="price-value gradient-text">¥49.9</span>
              </div>
            </div>
            <n-button type="primary" size="medium" class="tiktok-btn" @click="$router.push('/')">
              查看所有套餐
            </n-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useAppStore } from '@/stores'
import type { Product } from '@/stores'

const appStore = useAppStore()

const products = computed(() => appStore.products)

// 根据产品类型获取价格标签和值
const getPriceLabel1 = (product: Product) => {
  if (product.name.toLowerCase().includes('claude')) {
    return '天卡'
  }
  return '天卡'
}

const getPriceValue1 = (product: Product) => {
  if (product.name.toLowerCase().includes('claude')) {
    return product.pricing.daily // 16
  }
  return product.pricing.daily // 6.8
}

const getPriceLabel2 = (product: Product) => {
  if (product.name.toLowerCase().includes('claude')) {
    return '入门月卡'
  }
  return '月卡'
}

const getPriceValue2 = (product: Product) => {
  if (product.name.toLowerCase().includes('claude')) {
    return product.pricing.monthly // 198
  }
  return product.pricing.monthly // 66.8
}
</script>

<style scoped>
.products-page {
  min-height: 100vh;
  padding-top: 40px;
}

.page-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.page-header {
  text-align: center;
  margin-bottom: 60px;
}

.page-title {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 16px;
}

.page-subtitle {
  font-size: 1.2rem;
  color: #cccccc;
  font-weight: 500;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 24px;
}

.product-card {
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.product-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(254, 44, 85, 0.1), transparent);
  transition: left 0.5s ease;
}

.product-card:hover::before {
  left: 100%;
}

.product-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}

.product-icon {
  font-size: 2.5rem;
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(254, 44, 85, 0.1);
  border-radius: 16px;
}

.product-info {
  flex: 1;
}

.product-name {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 4px;
  color: #ffffff;
}

.product-category {
  color: #FE2C55;
  font-size: 1rem;
  font-weight: 500;
}

.popular-tag {
  background: linear-gradient(135deg, #FE2C55, #8B5CF6) !important;
  border: none !important;
  color: white !important;
}

.product-description {
  color: #cccccc;
  line-height: 1.6;
  margin-bottom: 20px;
  font-size: 1rem;
}

.product-features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.feature-tag {
  background: rgba(139, 92, 246, 0.2) !important;
  border: 1px solid rgba(139, 92, 246, 0.3) !important;
  color: #8B5CF6 !important;
}

.product-pricing {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.pricing-options {
  display: flex;
  gap: 20px;
}

.price-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.price-label {
  color: #999999;
  font-size: 0.9rem;
}

.price-value {
  font-size: 1.2rem;
  font-weight: 700;
  color: #ffffff;
}

@media (max-width: 768px) {
  .products-grid {
    grid-template-columns: 1fr;
  }
  
  .page-title {
    font-size: 2.5rem;
  }
  
  .product-pricing {
    flex-direction: column;
    align-items: stretch;
  }
  
  .pricing-options {
    justify-content: space-around;
  }
}
</style>
